<template>
  <view>

    <view class="goods-list">
      <view
        class="goods-item"
        v-for="item in getGoodsLists"
        :key="item.id"
        @click="goDetil(item.id)"
      >
        <image :src="item.img_url"></image>
        <view class="price">
          <text>￥{{item.market_price}}</text>
        </view>
        <view class="name">
          {{item.title}}
        </view>
      </view>
    </view>
    <view class="text1">
      <text>------ 我是有底线的 ------</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      index: 1,
      getGoodsLists: [],
    };
  },
  onLoad() {
    this.getGoodsList();
  },
  onPullDownRefresh() {
    console.log("触发");
    setTimeout(function () {
      console.log(123);
      uni.stopPullDownRefresh();
    }, 2000);
  },
  onReachBottom() {
    // console.log("到底了");
    this.index++;
    this.getGoodsList();
  },
  methods: {
    getGoodsList() {
      uni.request({
        url: "http://localhost:8082/api/getgoods?pageindex=" + this.index,
        success: (res) => {
          // console.log(res.data.message);
          this.getGoodsLists = [...this.getGoodsLists, ...res.data.message];
          // console.log(this.getGoodsLists);
        },
      });
    },
    goDetil(id) {
      uni.navigateTo({
        url: "/pages/index/xiangqingye?id=" + id,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.goods-list {
  padding: 0 21rpx;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  .goods-item {
    background: #fff;
    width: 355rpx;
    margin: 10rpx 0;
    image {
      width: 95%;
      height: 350rpx;
    }
    .price {
      margin: 20rpx 0 5rpx 0;
      color: red;
    }
    .name {
      margin: 5rpx;
    }
  }
}
.text1 {
  text-align: center;
}
</style>
